<template>
    <z-action id="J_material" type="text" label="插入合同物料" width="1000px" :fields="fields" :beforeSubmit="submit" ref="action">
    </z-action>
</template>

<script>
export default {
    props: {
        editor: {
            type: Object,
            required: true,
        },
    },
    data() {
        return {
            fields: [
                { name: 'label', label: '物料清单' },
                { name: 'type', label: '元素类型', visible: false, default: "table" },
                {
                    name: 'material', label: '示例数据', type: 'table', fields: [
                        { name: 'title', label: '物料名称' },
                        { name: 'sku', label: '规格' },
                        {
                            name: 'number', label: '数量', type: 'number', onChange: (newVal, material) => {
                                material.number = newVal
                                if (material.gstInclusive) this.calcAmount(material)
                            }
                        },
                        {
                            name: 'unit', label: '计量单位', type: 'select', options: [{ label: '件', value: '件' }, { label: '个', value: '个' }],
                        },
                        {
                            name: 'gstInclusive', label: '含税单价', type: 'money', onChange: (newVal, material) => {
                                material.price = newVal
                                if (material.number) this.calcAmount(material)
                            }
                        },
                        { name: 'amount', label: '总金额', type: 'money', readonly: true },
                    ]
                },
            ],
        };
    },
    methods: {
        calcAmount(material) {
            if (material.number == 0 || material.gstInclusive == 0) {
                return material.amount = 0
            }
            material.amount = Number(material.number) * Number(material.gstInclusive)
        },
        submit(formData) {
            this.editor.commands.insertContent({
                type: "Material",
                attrs: { ...formData, id: $.uid() },
                // content: [{ type: "text", text: formData.label }],
            });
        },
    },
};
</script>

<style></style>
